<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
    <style>
        * {
            padding: 0;
            margin: 0;
            /*overflow: auto;*/
        }
        .input {
            margin:10px 10px 400px 10px;
            width: 200px;
            height: 30px;
            border: 1px solid #ccc;
            display: block;
        }
        .next {
            width: 100%;
            height: 44px;
            line-height: 44px;
            background: orangered;
            position: absolute;
            color:#fff;
            text-align: center;
        }
        .pos-rel {
            position: relative;;
        }
    </style>
    <script src="../js/zepto.js"></script>
</head>
<body>
<input class="input" type="text" />
<input class="input" type="text" />
<input class="input" type="text" />

<div class="next">
    下一步
</div>
</body>
<script>
    var isIOS = (/iphoneipad/gi).test(navigator.appVersion);

    var likeFixed = function() {
        //解绑resize事件  以免进入死循环
        $(window).unbind("resize", likeFixed);

        var t = document.documentElement.scrollTop  document.body.scrollTop, fixed_height = 44, top;

        //网页可见高度加上滚动条高度  - fixed元素的高度
        top = window.innerHeight+ t - fixed_height;
        //设置fixed div的top
        $(".next").css({"top": top+"px" });

        //重新绑定resize事件
        setTimeout(function() {
            $(window).bind("resize", likeFixed);
        }, 10);
    }

    $(function() {
        if (isIOS) {
            likeFixed();
            function touchstart(event) {
                $(".next").css("opacity",0);
            }
            function touchend(event) {
                $(".next").css("opacity",1);
            }
            //touch的时候隐藏
            document.addEventListener("touchstart", touchstart, false);
            //滚动后重新设置fixed div的位置
            window.onscroll = likeFixed;
            //touch后显示
            document.addEventListener("touchend", touchend, false);
        }

        //所有input blur时重新计算位置，兼容chrome
        $("body").on("focusout", "input", likeFixed);
    });

</script>
</html>